<template>
  <div class="shopmanage">
    <h3>
      <span>店铺管理</span>
      <el-button type="primary" @click="clicksave">保存</el-button>
    </h3>
    <div class="shopmanage-input">
      <div class="shopmanage-p">
        <span>店铺名称</span>
        <div>
          <el-input v-model="shopall.name" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="shopmanage-p" style="width: 100%">
        <span>店铺公告</span>
        <div>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="shopall.bulletin"
            maxlength="200"
            show-word-limit
            autosize
            style="width: 400px"
          >
          </el-input>
        </div>
      </div>
      <!-- 店铺头像 -->
      <div class="shopmanage-p">
        <span>店铺头像</span>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/shop/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          style="
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            width: 178px;
            height: 178px;
          "
        >
          <img
            style="border-radius: 6px; width: 178px; height: 178px"
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div
        class="shopmanage-p"
        style="width: 100%; word-wrap: break-word; word-break: normal"
      >
        <span>店铺图片</span>
        <!-- list-type="picture-card"照片墙   :file-list="fileList" 回显图片 -->
        <el-upload
          action="http://127.0.0.1:5000/shop/upload"
          list-type="picture-card"
          :on-remove="clearList"
          :file-list="fileList"
          :on-success="shopsucess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="shopmanage-p">
        <span>配送费</span>
        <div>
          <el-input
            v-model="shopall.deliveryPrice"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="shopmanage-p">
        <span>配送时间</span>
        <div>
          <el-input
            v-model="shopall.deliveryTime"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="shopmanage-p">
        <span>配送描述</span>
        <div>
          <el-input
            v-model="shopall.description"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="shopmanage-p">
        <span>店铺评分</span>
        <div>
          <el-input
            disabled
            v-model="shopall.score"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="shopmanage-p">
        <span>销量</span>
        <div>
          <el-input
            disabled
            v-model="shopall.sellCount"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="shopmanage-p">
        <span>添加活动</span>
        <div>
          <el-input placeholder="请输入内容" v-model="active"></el-input>
        </div>
        <el-button
          type="primary"
          @click="clickadd"
          class="shopmanage-button"
          style="margin-left: 5px"
        >
          添加活动
        </el-button>
      </div>
      <!-- 活动 -->
      <div class="shopmanage-p" style="width: 100%">
        <span>活动</span>
        <div class="activeall">
          <!-- 上面存的时候用空数组,点击选中数组才有值 -->
          <el-checkbox-group v-model="unchencklist">
            <!-- 下面用后台传来的数组,加载页面的时候会有选项 -->
            <el-checkbox
              v-for="item in checkList"
              :key="item"
              :label="item"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="shopmanage-p">
        <span>营业时间</span>
        <span>
          <!-- value-format='格式' 将时间格式转成指定格式 -->
          <el-time-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            is-range
            v-model="values"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
// 引用ajax获取店铺详情,修改店铺页面
import { shopinfo, editshop } from "@/apis/shop";
export default {
  data() {
    return {
      // 店铺所有数据
      shopall: {},
      // 店铺头像(本机渲染图片)
      imageUrl: "",
      // 未选中活动列表
      unchencklist: [],
      // 选中店铺活动列表
      checkList: [],
      // 添加活动
      active: "",
      // 营业时间
      values: [],
      // 回显老的店铺图片
      fileList: [],
      // 回显新的店铺图片
      newfileList: [],
    };
  },
  methods: {
    // 封装加载这个页面的函数
    funshopinfo() {
      // 加载页面就调用这个ajax
      shopinfo().then((res) => {
        // console.log(res);
        // 店铺所有数据
        this.shopall = res.data.data;
        // console.log(this.shopall);
        // 将店铺头像赋值
        this.imageUrl = this.shopall.avatar;
        // 初始给头像赋值(挂载到下面的this指针上的头像)
        this.newimg = this.shopall.avatar.substr(
          this.shopall.avatar.lastIndexOf("/") + 1
        );
        // console.log(this.fileList);
        // 获得后台时间数据
        this.values = this.shopall.date;
        // map遍历这个数组
        this.fileList = this.shopall.pics.map((v) => {
          // console.log(v);
          // 获得图片名
          let name = v.substr(v.lastIndexOf("/") + 1);
          // 将这个老数组的照片名先push到新数组
          this.newfileList.push(name);
          // console.log(name);
          // 返回指定格式到新数组,才能渲染到照片墙
          return {
            name,
            url: v,
          };
        });
        // 店铺活动渲染
        this.checkList = this.shopall.supports;
        // console.log(this.checkList);
      });
    },
    // 上传店铺头像
    handleAvatarSuccess(res, file) {
      // console.log(res, file);
      // 回显店铺头像
      this.imageUrl = URL.createObjectURL(file.raw);
      // 将店铺头像数据挂载到this指针(关键在与this指针)
      this.newimg = res.imgUrl;
    },
    // 上传图片墙
    shopsucess(res) {
      // console.log(res.imgUrl);
      // 将新图片,推到新数组里面
      this.newfileList.push(res.imgUrl);
    },
    // 删除照片墙
    clearList(val) {
      // console.log(val);
      // 判定是新数组的照片,还是老数组的照片
      let newname = val.response ? val.response.imgUrl : val.name;
      // 遍历新数组
      for (let i = 0; i < this.newfileList.length; i++) {
        // 如果数组的索引上的元素等于删除的图片
        if (this.newfileList[i] == newname) {
          // 就删除这个元素,从索引i开始,删除一个元素
          this.newfileList.splice(i, 1);
          // 终止循环
          break;
        }
      }
    },
    // 添加活动
    clickadd() {
      // 添加活动,内容不为空才添加
      if (this.active != "") {
        this.$message({
          message: "恭喜你，添加活动成功",
          type: "success",
        });
        // 将活动的数据推到活动列表
        this.checkList.push(this.active);
      }
    },
    // 保存修改设置
    clicksave() {
      // 先用一个对象装所有属性
      let params = {
        id: this.shopall.id,
        name: this.shopall.name,
        bulletin: this.shopall.bulletin,
        deliveryPrice: this.shopall.deliveryPrice,
        deliveryTime: this.shopall.deliveryTime,
        description: this.shopall.description,
        score: this.shopall.score,
        sellCount: this.shopall.sellCount,
        // 特殊的四个节段(不修改本身为空,所以要在加载时先设置给初始值)
        // 头像,上面的this指针上设定了的图片名(关键在与this,且没有前面的地址,只有图片名)
        avatar: this.newimg,
        // 活动(选中之后的数组)
        supports: JSON.stringify(this.unchencklist),
        // 日期
        date: JSON.stringify(this.values),
        // 照片(新的照片墙图片)
        pics: JSON.stringify(this.newfileList),
      };
      // console.log(this.values);
      // editshop, params;
      // 发送ajax请求,修改店铺信息
      editshop(params).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          if (this.unchencklist == "") {
            this.$message({
              message: "请添加并勾选活动",
              type: "warning",
            });
            return;
          } else {
            this.$message({
              message: "恭喜你，修改店铺信息成功",
              type: "success",
            });
          }
          // 重新渲染页面
          this.funshopinfo();
        }
      });
    },
  },
  created() {
    // 加载数据时渲染页面
    this.funshopinfo();
  },
};
</script>

<style lang="less" scoped>
.shopmanage {
  margin: 20px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  h3 {
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    button {
      height: 38px;
      margin-top: 12px;
    }
  }
  .shopmanage-input {
    .shopmanage-p {
      width: 400px;
      display: flex;
      margin-bottom: 20px;
      .shopmanage-button {
        padding: 5px;
      }
      .shopmanage-img {
        width: 150px;
        height: 150px;
        border-radius: 10px;
      }
      span {
        width: 100px;
        text-align: right;
        margin-right: 20px;
      }
    }
    .activeall {
      display: flex;
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
      }
    }
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>